<template>
	<gracePage :customHeader="false">
		<!-- 页面主体 -->
		<view slot="gBody">
			<!--  演示一个渐变背景，请根据项目实际需求自行改进  -->
			<graceHeader background="#FFFFFF">
				<view class="block" style="padding:0 20rpx;">
					<!-- 设置按钮 -->
					<navigator open-type="navigateBack" class="grace-header-icons-1 grace-black6 fl">
						<text class="iconfont icon-back fz18"></text>
						<text class="pl6 fw">消息</text>
					</navigator>
					<!-- 设置按钮 -->
					<navigator url="../user/index" open-type="switchTab" class="grace-header-icons  grace-black6 fz18 fr" @tap="set">
						<text class="iconfont icon-7 fw fz18"></text>
					</navigator>
				</view>
			</graceHeader>
			<view class="grace-grids grace-grids-top demoForIcon grids-border-wrap defaulbgf mt hfixed boxshadow">
				<view class="grace-grids-items pr">
					<text class="grace-grids-icon iconfont icon-huifu fz20"></text>
					<text class="grace-grids-text">回复我的</text>
					<view class="grace-badge grace-bg-red grace-badge-absolute grace-white" style="top:15rpx; right:22rpx;">98</view>
				</view>
				<view class="grace-grids-items pr">
					<text class="grace-grids-icon iconfont icon-xiaoxi1 fz28"></text>
					<text class="grace-grids-text">我的消息</text>
					<view class="grace-badge grace-bg-red grace-badge-absolute grace-white" style="top:15rpx; right:22rpx;">58</view>
				</view>
				<view class="grace-grids-items pr">
					<text class="grace-grids-icon iconfont icon-xiaoxi3 fz26"></text>
					<text class="grace-grids-text">课程消息</text>
					<view class="grace-badge grace-bg-red grace-badge-absolute grace-white" style="top:15rpx; right:22rpx;">238</view>
				</view>
				<view class="grace-grids-items pr">
					<text class="grace-grids-icon iconfont icon-xiaoxi2 fz26"></text>
					<text class="grace-grids-text">好友动态</text>
					<view class="grace-badge grace-bg-red grace-badge-absolute grace-white" style="top:15rpx; right:22rpx;">38</view>
				</view>
				<view class="grace-grids-items pr">
					<text class="grace-grids-icon iconfont icon-xitongxiaoxi fz22"></text>
					<text class="grace-grids-text">系统消息</text>
					<view class="grace-badge grace-bg-red grace-badge-absolute grace-white" style="top:15rpx; right:22rpx;">18</view>
				</view>
			</view>
			<view class="grace-margin-top defaulbgf boxshadow" style="margin-top: 180rpx;">
				<graceSwipeList :msgs="msgs" @itemTap="itemTap" @btnTap="btnTap"></graceSwipeList>
			</view>
			
			<graceEmptyNew v-if="msgs.length == 0">
				<view slot="img" class="empty-view">
					<!-- 请根据您的项目要求制作并更换为空图片 -->
					<image class="empty-img" style="width: 240rpx;" mode="widthFix" src="https://staticimgs.oss-cn-beijing.aliyuncs.com/empty.png"></image>
				</view>
				<text slot="text" class="grace-text-small grace-gray">抱歉，没有搜索到任何数据</text>
			</graceEmptyNew>
	</view>
	</gracePage>
</template>
<script>
import gracePage from "../../graceUI/components/gracePage.vue";
import graceSwipeList from "../../graceUI/components/graceSwipeList.vue";
import graceEmptyNew from "../../graceUI/components/graceEmptyNew.vue";
// 模拟个 api 请求的数据
var msgsFromApi = [
	{
		img       : 'https://fudezao.oss-cn-qingdao.aliyuncs.com/statics/uper/201909/23/5d882ce3900b7.png',
		msgnumber : 8,
		title     : "优惠促销",
		time      : "昨天",
		content   : "兰叶春葳蕤，桂华秋皎洁。"
	},
	{
		img       : 'https://fudezao.oss-cn-qingdao.aliyuncs.com/statics/uper/201909/23/5d882db43842c.png',
		msgnumber : 0,
		title     : "账户通知",
		time      : "2019-08-11",
		content   : "您的账户入账 *** 元"
	},
	{
		img       : 'https://fudezao.oss-cn-qingdao.aliyuncs.com/statics/uper/201909/23/5d882ce3900b7.png',
		msgnumber : 12,
		title     : "优惠促销",
		time      : "昨天",
		content   : "草木有本心，何求美人折？"
	},
	{
		img       : 'https://fudezao.oss-cn-qingdao.aliyuncs.com/statics/uper/201909/23/5d882ce3900b7.png',
		msgnumber : 8,
		title     : "优惠促销",
		time      : "昨天",
		content   : "兰叶春葳蕤，桂华秋皎洁。"
	},
	{
		img       : 'https://fudezao.oss-cn-qingdao.aliyuncs.com/statics/uper/201909/23/5d882db43842c.png',
		msgnumber : 0,
		title     : "账户通知",
		time      : "2019-08-11",
		content   : "您的账户入账 *** 元"
	},
	{
		img       : 'https://fudezao.oss-cn-qingdao.aliyuncs.com/statics/uper/201909/23/5d882ce3900b7.png',
		msgnumber : 12,
		title     : "优惠促销",
		time      : "昨天",
		content   : "草木有本心，何求美人折？"
	},
	{
		img       : 'https://fudezao.oss-cn-qingdao.aliyuncs.com/statics/uper/201909/23/5d882ce3900b7.png',
		msgnumber : 8,
		title     : "优惠促销",
		time      : "昨天",
		content   : "兰叶春葳蕤，桂华秋皎洁。"
	},
	{
		img       : 'https://fudezao.oss-cn-qingdao.aliyuncs.com/statics/uper/201909/23/5d882db43842c.png',
		msgnumber : 0,
		title     : "账户通知",
		time      : "2019-08-11",
		content   : "您的账户入账 *** 元"
	},
	{
		img       : 'https://fudezao.oss-cn-qingdao.aliyuncs.com/statics/uper/201909/23/5d882ce3900b7.png',
		msgnumber : 12,
		title     : "优惠促销",
		time      : "昨天",
		content   : "草木有本心，何求美人折？"
	},
	{
		img       : 'https://fudezao.oss-cn-qingdao.aliyuncs.com/statics/uper/201909/23/5d882ce3900b7.png',
		msgnumber : 8,
		title     : "优惠促销",
		time      : "昨天",
		content   : "兰叶春葳蕤，桂华秋皎洁。"
	},
	{
		img       : 'https://fudezao.oss-cn-qingdao.aliyuncs.com/statics/uper/201909/23/5d882db43842c.png',
		msgnumber : 0,
		title     : "账户通知",
		time      : "2019-08-11",
		content   : "您的账户入账 *** 元"
	},
	{
		img       : 'https://fudezao.oss-cn-qingdao.aliyuncs.com/statics/uper/201909/23/5d882ce3900b7.png',
		msgnumber : 12,
		title     : "优惠促销",
		time      : "昨天",
		content   : "草木有本心，何求美人折？"
	},
	{
		img       : 'https://fudezao.oss-cn-qingdao.aliyuncs.com/statics/uper/201909/23/5d882ce3900b7.png',
		msgnumber : 8,
		title     : "优惠促销",
		time      : "昨天",
		content   : "兰叶春葳蕤，桂华秋皎洁。"
	},
	{
		img       : 'https://fudezao.oss-cn-qingdao.aliyuncs.com/statics/uper/201909/23/5d882db43842c.png',
		msgnumber : 0,
		title     : "账户通知",
		time      : "2019-08-11",
		content   : "您的账户入账 *** 元"
	},
	{
		img       : 'https://fudezao.oss-cn-qingdao.aliyuncs.com/statics/uper/201909/23/5d882ce3900b7.png',
		msgnumber : 12,
		title     : "优惠促销",
		time      : "昨天",
		content   : "草木有本心，何求美人折？"
	},
];
export default {
	data() {
		return {
			msgs : []
		}
	},
	onPullDownRefresh(){
		setTimeout(()=>{
			uni.stopPullDownRefresh();
		},1000);
	},
	onLoad:function(){
		// 模拟 api 请求，因为请求数据里没有按钮信息我们利用js进行按钮补充
		setTimeout(() => {
			for(let i = 0; i < msgsFromApi.length; i++){
				// 具体几个按钮及按钮文本根据项目需求来，格式 {name:按钮文本, bgColor:按钮背景色}
				msgsFromApi[i].btns = [{'name':'标为已读', bgColor:'#323232'}, {'name':'删除消息', bgColor:'#FF0036'}];
			}
			this.msgs = msgsFromApi;
		}, 500);
	},
	methods:{
		btnTap : function(index, btnIndex){
			console.log(index, btnIndex);
			// 第一个按钮被点击 [ 标记已读 ]
			if(btnIndex == 0){
				if(this.msgs[index].btns[0].name == '标为已读'){
					this.msgs[index].btns = [{'name':'标为未读', bgColor:'#888888'}, {'name':'删除消息', bgColor:'#FF0036'}];
					this.msgs[index].msgnumber = 0;
				}else{
					this.msgs[index].btns = [{'name':'标为已读', bgColor:'#323232'}, {'name':'删除消息', bgColor:'#FF0036'}];
					this.msgs[index].msgnumber = 1;
				}
				setTimeout(()=>{this.msgs.splice(index, 1, this.msgs[index]);}, 300);
			}
			// 第二个按钮被打开 [ 删除消息 ]
			else if(btnIndex == 1){
				uni.showModal({
					title:"确定要删除吗?",
					success: (e) => {
						if(e.confirm){this.msgs.splice(index, 1);}
					}
				});
			}
		},
		// 列表本身被点击
		itemTap : function (e) {
			console.log(e);
			uni.showToast({title:"索引"+e});
		}
	},
	components:{
		gracePage, graceSwipeList,graceEmptyNew
	}
}
</script>
<style>
	page{background:#F8F8F8;}
	.grace-header-icons-1 {
	    height: 88rpx;
	    line-height: 88rpx;
	    text-align: center;
	    font-size: 36rpx;
	    -webkit-flex-shrink: 0;
	    flex-shrink: 0;
	}
	
	.grace-grids-items{width:20%;}
	
	
	/*  #ifdef  H5  */
	.grace-grids-top{top:90rpx;}
	/*  #endif  */
	
	/*  #ifdef  APP-PLUS */
	.grace-grids-top{top:140rpx;}
	/*  #endif  */
	
</style>